import React, { useContext } from "react";
import { View, StyleSheet, Dimensions, Text, Image, TouchableOpacity, ScrollView } from "react-native";
import { Icon } from "@rneui/themed";
import NoListImg from '@/assets/safe/no_list.png'
import SingleDotImg from '@/assets/safe/single_dot.png'
import AccountImg from '@/assets/safe/account.png'
import CommonContext from '@/utils/createContext'
import { BigNumber } from 'bignumber.js'
import moment from "moment";
import { getValue } from "@/utils/deviceStorage";
import { TranscationType } from '@/config/config'
import { getTransactionType } from "@/utils/util";

const { width, height, scale } = Dimensions.get('window')
const ratio = width * scale / 1080
let nonce

const QueueList = () => {

    const { safeQueueList, handlePressItem, loadMore } = useContext(CommonContext)

    //上拉加载数据,如果有的话
    const onMomentumScrollEnd = (event) => {
        const offSetY = event.nativeEvent.contentOffset.y; // 获取滑动的距离
        const contentSizeHeight = event.nativeEvent.contentSize.height; // scrollView  contentSize 高度
        const oriageScrollHeight = event.nativeEvent.layoutMeasurement.height; // scrollView高度
        if (offSetY + oriageScrollHeight >= contentSizeHeight - 1) {
            //加载新数据
            loadMore('queued')
        }
    }

    return (
        <ScrollView style={styles.container}
            onScrollEndDrag={onMomentumScrollEnd}>
            {safeQueueList && safeQueueList.length > 0 ?
                <View style={styles.bodyContent}>
                    {safeQueueList.map((item, index) => {
                        const typeData = getTransactionType(item.transaction) || {}
                        if (index === 0) {
                            nonce = item.transaction.executionInfo.nonce
                        }
                        const chainDetail = getValue('chainDetail')
                        const nativeCurrency = chainDetail?.nativeCurrency || {}
                        var a = moment().diff(moment(item.transaction.timestamp).format('YYYY-MM-DD HH:mm:ss'), 'minutes')
                        let str = moment.duration(-a, 'minutes').humanize(true)
                        return (
                            <View key={index}>
                                {index == 0 && <Text style={{ ...styles.title2, marginTop: 9 * ratio, marginLeft: 15 * ratio }}>NEXT TRANSACTION</Text>}
                                {index == 1 && <Text style={{ ...styles.title2, marginTop: 9 * ratio, marginLeft: 15 * ratio }}>
                                    MUST TO EXECUTE NONCE {nonce} FIRST
                                </Text>}
                                <TouchableOpacity style={{ marginTop: 20 * ratio }} onPress={() => handlePressItem(item.transaction.id, typeData.text === 'On-chain rejection' ? 'rejection' : 'general')}>
                                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                                        <View style={{ flexDirection: 'row', marginLeft: 15 * ratio }}>
                                            <Image source={TranscationType[typeData.icon]} style={{ width: typeData.size * ratio, height: typeData.size * ratio, marginTop: 3 * ratio }} />
                                            <Text style={{ ...styles.title1, marginLeft: 6 * ratio }}>{typeData.text}</Text>
                                        </View>
                                        <Text style={{ ...styles.title1, marginRight: 24 * ratio, color: '#2C2C2C' }}>
                                            {item.transaction.txInfo.transferInfo?.type === 'NATIVE_COIN' ?
                                                `-${new BigNumber(item.transaction.txInfo.transferInfo?.value).times(`1e-${nativeCurrency?.decimals}`).toFixed()} ${nativeCurrency.symbol?.toUpperCase()}`
                                                :
                                                ``}
                                        </Text>
                                    </View>
                                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                                        <Text style={{ ...styles.title2, marginLeft: 15 * ratio }}>{item.transaction.executionInfo.nonce}</Text>
                                        <Text style={{ ...styles.title2, marginLeft: 15 * ratio }}>{str}</Text>
                                        <Icon style={{ marginRight: 16 * ratio }} type="antdesign" size={10}
                                            color='#000000' name='right' />
                                    </View>
                                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                            <Image source={SingleDotImg} style={{ width: 6 * ratio, height: 6 * ratio, marginLeft: 17 * ratio }} />
                                            <Text style={{ ...styles.title1, color: '#FF000A', marginLeft: 11 * ratio }}>{item.transaction.txStatus}</Text>
                                        </View>
                                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                            <Image source={AccountImg} style={{ width: 15 * ratio, height: 11 * ratio }} />
                                            <Text style={{ ...styles.title2, color: '#C6C6C6', marginRight: 24 * ratio }}>
                                                {item.transaction.executionInfo.confirmationsSubmitted} out of {item.transaction.executionInfo.confirmationsRequired}
                                            </Text>
                                        </View>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        )
                    })}
                </View>
                :
                <View style={styles.noListContent}>
                    <Image source={NoListImg} style={{ width: 120 * ratio, height: 100 * ratio }} />
                    <Text style={{ ...styles.title1, marginTop: 15 * ratio }}>Transactions will appear here</Text>
                </View>}
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    bodyContent: {
        flex: 1
    },
    noListContent: {
        width: width,
        height: height * 0.6,
        justifyContent: 'center',
        alignItems: 'center'
    },
    title1: {
        fontSize: 14,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#2C2C2C',
        lineHeight: 20
    },
    title2: {
        fontSize: 12,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#898989',
        lineHeight: 18
    }
})
export default QueueList